<template>
    <div class="about hello">
        <ul>
            <li v-for="(article,$index) in articles" @click="hec($index)" :class="{ active:$index==selectItem}">
                {{article.genres[0]}}
                <img :src="article.casts[0].avatars.small" alt="">
            </li>
        </ul>
        <img src="../images/logo.png" style="width: 60px">
        这是{{page}}页面
    </div>
</template>

<script type="text/javascript">
    require('../css/web.less');

    module.exports = {
        data () {
            return {
                page: 'hello',
                hello:'sd',
                items:[
                    {text:'fsfd'},
                    {text:'fsafdsaf'},
                    {text:'wfuser'}
                ],
                selectItem:0,
                articles: [],
            }
        },

        mounted: function() {
            this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
                headers: {

                },
                emulateJSON: true
            }).then(function(response) {
                // 这里是处理正确的回调

                this.articles = response.data.subjects
                // this.articles = response.data["subjects"] 也可以

            }, function(response) {
                // 这里是处理错误的回调
                console.log(response)
            });


        },

        methods: {
            hec:function ($index) {
                this.selectItem=$index
            },

        }

    }

</script>